//加载公共样式
require('../../assets/css/index.less')
//加载自己的样式
require('./changeinfo.less')

//引入axios工具函数
const request = require('../../lib/requst');

//服务器地址
let API = "http://fitness.h5.itsource.cn:3701";
function $(select) {
    return document.querySelector(select)
}
window.onload = () => {
    //渲染头像
    request.get("/api/user/info").then(res => {
        // console.log(res.data)
        if (res.data.errno === 0) {
            $(".avatar").src = API + res.data.data.imgUrl;
        }
    })
   //修改头像
    $("#upload").addEventListener("change",function(e){
        const formData = new FormData();
        formData.append("file",e.target.files[0])
        request.post("/api/circles/uploadImg",formData).then(res => {
            // $(".avatar").src = API + res.data.data.imgUrl;
            console.log(res.data)
        })
    })

    //点击头像触发 文件输入框点击事件
    $(".avatar").addEventListener("click", function (e) {
        upload.click()
    })
    //性别选择
    $('#showPicker').addEventListener("click", function () {
        weui.picker([{
            label: '男',
            value: 0
        }, {
            label: '女',
            value: 1
        },], {
                onConfirm: function (result) {
                    $(".sex").textContent = result[0].label;
                },
                title: '性别选择'
            });
    });
    //省份选择   顺序：先选择了省份，后面才能定位到省份的所有城市进行选择 
    let Province = [];
    let ProvinceId = "";
    let cityId = ""
    $('#showProvince').addEventListener("click", function () {
        // 1.省份接口
        request.get("api/shared/province").then(res => {
            if (res.data.errno === 0) {
                // 2.将数据存入Province主要目的是为了改变键值为：label（列表选择时的名字） 和 value 
                Province = res.data.data.map(function (v, i) {
                    return {
                        label: v.name,
                        value: v.id
                    }
                })
                // console.log(city)
                // 3.传入city是将城市渲染到Dom上
                weui.picker(Province, {
                    // result 是 你在列表最后选择的值
                    onConfirm: function (result) {
                        ProvinceId =  result[0].value;
                        $(".shengfen").textContent = result[0].label;
                        // 将城市的请求写在这里是为了获取选中城市（result）的id，因为接口需要的是城市的id
                        getCity(result);
                    },
                    title: '单列选择器'
                });

            }
        })
    });
    //获取城市信息
    function getCity(result) {
        //4.省份选完过后，获取城市接口
        request.get("/api/shared/city", {
            params: {
                provinceId: result[0].value
            }
        }).then(res => {
            if (res.data.errno === 0) {
                // console.log(res.data.data)

                // 5.将数据存入city主要目的是为了改变键值为：label（列表选择时的名字） 和 value
                city = res.data.data.map(function (v, i) {
                    return {
                        label: v.name,
                        value: v.id
                    }
                })
                // console.log(city)
                //6.传入city是将城市渲染到Dom上
                $("#showCity").addEventListener("click", function () {
                    weui.picker(city, {
                        // result 是 你在列表最后选择的值
                        onConfirm: function (result) {
                            // console.log(result)
                            cityId = result[0].value
                            console.log(cityId);
                            $(".mycity").textContent = result[0].label;
                        },
                        title: '城市选择'
                    });
                })
            }
        })
    }

    // 生日选择
    $('#showDatePicker').addEventListener("click", function () {
        weui.datePicker({
            start: 1990,
            end: new Date().getFullYear(),
            onConfirm: function (result) {
                let birthday = result.map(function (v, i) {
                    return String(v.value).padStart(2, "0")
                }).join("-")
                console.log(birthday);
                $(".mybirthday").textContent = birthday
            },
            title: '多列选择器'
        });
    });
    //文本框输入文字数量更新
    $(".textarea").addEventListener("input",function(){
        $(".font_num").textContent = this.value.length;
    })
    //回传修改的信息
        $(".sure_bt").addEventListener("click",function(){
           
            request.post("/api/user/changeInfo",{
                    nickName: $("#nickname").value,
                    gender : $(".sex").textContent,
                    provinceId : ProvinceId ,
                    cityId : cityId,
                    birthday : $(".mybirthday").textContent,
                    imgUrl : $(".avatar").src.replace(API,""),
                    sign : $(".textarea").value,
            }).then(res => {
                console.log(res.data);
                localStorage.setItem("token","Bearer " + res.data.data.token)
            })
            request.get("/api/user/info").then(res=>{
                console.log(res.data)
            })
            
        })
        request.get("/api/user/info").then(res => {
            // console.log(res.data)
            if (res.data.errno === 0) {
                $(".avatar").src = API + res.data.data.imgUrl;
            }
        })
        //渲染已保存的数据
        request.get("/api/user/info").then(res => {
            console.log(res.data.data.nickName)
            $("#nickname").value = res.data.data.nickName
            $(".sex").textContent = res.data.data.gender
            $(".mybirthday").textContent = res.data.data.birthday
            $(".textarea").textContent = res.data.data.sign
            $(".font_num").textContent =   $(".textarea").value.length
            let p_id = res.data.data.provinceId 
            let c_id = res.data.data.cityId
            console.log(res.data.data.provinceId )
            request.get("api/shared/province").then(res=>{
                let name=""
                res.data.data.map(function(v,i){
                    if(v.id===p_id){
                       name = v.name
                    }
                  })
                  console.log(name)
                  $(".shengfen").textContent = name;

            })
            request.get("/api/shared/city",{
                params: {
                    provinceId: p_id
                }
            }).then(res=>{
                console.log(res.data)
                let name2=""
                res.data.data.map(function(v,i){
                    if(v.id===c_id){
                       name2 = v.name
                    }
                  })
                  console.log(name2)
                  $(".mycity").textContent = name2;

            })
  

        })

    

}